import 'dart:ui';

import 'package:badges/badges.dart';
import 'package:ccshop/ui/pages/CartPage.dart';
import 'package:ccshop/ui/pages/CategoryPage.dart';
import 'package:ccshop/ui/pages/HomePage.dart';
import 'package:ccshop/ui/pages/MinePage.dart';
import 'package:flutter/material.dart';

class BottomNavigationWidget extends StatefulWidget {
  @override
  _BottomNavigationWidgetState createState() => _BottomNavigationWidgetState();
}

class _BottomNavigationWidgetState extends State<BottomNavigationWidget> {
  int _currentIndex = 0;
  List<Widget> _pages = List();

  @override
  void initState() {
//    pages.add(HomePage());
//    pages.add(CartPage());
//    pages.add(CategoryPage());
//    pages.add(MinePage());
    // 为了方便用的dart中的..级联操作符和上面的一样的
    _pages
      ..add(HomePage())
      ..add(CategoryPage())
      ..add(CartPage())
      ..add(MinePage());
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // IndexedStack 用来保持页面状态的，不然切换的时候会丢失状态
      body: IndexedStack(children: _pages, index: _currentIndex,),
      bottomNavigationBar: BottomNavigationBar(
        // 不设置这个type，在tab超过三个的时候，下面的文字就不会被显示出来了
        type: BottomNavigationBarType.fixed,
        currentIndex: _currentIndex,
        onTap: (int index) {
          setState(() {
            _currentIndex = index;
          });
        },
        selectedItemColor: Colors.red,
        unselectedItemColor: Colors.grey,
        selectedFontSize: 14.0,
        //选中文字大小
        unselectedFontSize: 14.0,
        //未选中文字大小
        items: [
          BottomNavigationBarItem(
              icon: Image.asset("images/shop_tab_home.png",
                  width: 20, height: 20, color: Colors.grey),
              activeIcon: Image.asset("images/shop_tab_home.png",
                  width: 20, height: 20, color: Colors.red),
              title: Text(
                "首页",
              )),
          BottomNavigationBarItem(
              icon: Image.asset(
                "images/shop_tab_category.png",
                width: 20,
                height: 20,
                color: Colors.grey,
              ),
              activeIcon: Image.asset(
                "images/shop_tab_category.png",
                width: 20,
                height: 20,
                color: Colors.red,
              ),
              title: Text(
                "分类",
              )),
          BottomNavigationBarItem(
              icon: Badge(
                badgeContent: Text("6", style: TextStyle(color: Colors.white),),
                child: Image.asset(
                  "images/shop_tab_cart.png",
                  width: 20,
                  height: 20,
                  color: Colors.grey,
                ),
              ),
              activeIcon: Badge(
                badgeContent: Text("6", style: TextStyle(color: Colors.white),),
                child: Image.asset(
                  "images/shop_tab_cart.png",
                  width: 20,
                  height: 20,
                  color: Colors.red,
                ),
              ),
              title: Text(
                "购物车",
              )),
          BottomNavigationBarItem(
              icon: Image.asset(
                "images/shop_tab_mine.png",
                width: 20,
                height: 20,
                color: Colors.grey,
              ),
              activeIcon: Image.asset(
                "images/shop_tab_mine.png",
                width: 20,
                height: 20,
                color: Colors.red,
              ),
              title: Text(
                "我的",
              )),
        ],
      ),
    );
  }
}
